<template>
  <!--注册-->
  <div class="wrap">
    <div v-if="step === 1" class="tdbModule register">
      <div class="registerTitle">注册账户</div>

      <div class="registerCont" style="margin:100px 0px 0px 200px">
        <ul>

          <li>
            <span class="dis">用户名</span>
            <input type="userName" v-model="userInfo.userName" class="input" />
          </li>

          <li>
            <span class="dis">密码</span>
            <input type="password" v-model="userInfo.password" class="input" />
            <span class="info">
              6-24个字符，英文、数字组成，区分大小写
            </span>
          </li>

          <li class="telNumber">
            <span class="dis">邮箱号</span>
            <input class="input" v-model="userInfo.email" />
            <button v-if="!sending" class="button" @click="send()">
              获取验证码
            </button>
            <button v-else disabled class="button disabled">
              {{ leftSecond }}秒后重发
            </button>
          </li>

          <li>
            <span class="dis">邮箱验证码</span>
            <input class="input" v-model="code" />
            <span class="info">
              请输入验证码
            </span>
          </li>

          <li class="agree">
            <input type="checkbox" checked />
            我同意《<router-link to="#" target="_black">孔方兄贷款注册协议</router-link>》
            <span>请查看协议</span>
          </li>
          <li class="btn">
            <button @click="register()">
             注册
            </button>
          </li>
        </ul>
      </div>
    </div>

    <div v-if="step === 2" class="tdbModule register">
      <div class="registerTitle">注册账户</div>

      <div class="user-borrower">
        <el-row>
          <el-col :sm="12" :lg="6" style="margin-left: 350px">
            <el-result icon="success" title=" 恭喜您注册成功！">
              <template slot="extra">
                <el-button type="primary" @click="goLogin" size="medium">请登录</el-button>
              </template>
            </el-result>
          </el-col>
        </el-row>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      step: 1, //注册步骤
      userInfo: {
        userName:'',
        email:'',
        password:'',
      },
      sending: false, // 是否发送验证码
      second: 60, // 倒计时间
      leftSecond: 0, //剩余时间
      code:'',//验证码
    }
  },

  methods: {
    //发短信
    send() {
      if (this.userInfo.email === null) {
        this.$message.error('请输入邮箱号码')
        return
      }

      //防止重复提交，显示倒计时
      if (this.sending) return
      this.sending = true

      //倒计时
      this.timeDown()

      this.$axios
          .post(`http://localhost:9090/loan/user/sendMail?email=`+this.userInfo.email).then(
          response => {
            alert("验证码为："+response.data.msg)
            this.code=response.data.msg;
          }
      )
    },

    //倒计时
    timeDown() {
      this.leftSecond = this.second

      const timmer = setInterval(() => {
        this.leftSecond--
        if (this.leftSecond <= 0) {
          //停止计时
          clearInterval(timmer)
          this.sending = false
        }
      }, 1000)
    },

    //注册
    register() {
      this.$axios
          .post(`http://localhost:9090/loan/user/adduser`, this.$qs.stringify(this.userInfo)).then(
          response => {
            if (response.data===true){
              this.$message({
                type: 'success',
                message: "注册成功！"
              })
              this.step = 2
            }else {
              this.$message({
                type: 'info',
                message: "注册失败，请再次尝试！"
              })
            }

          },
          error => {
            this.$message({
              type: 'info',
              message: "注册失败，请再次尝试！"
            })
          }
      )
    },
    goLogin(){
      this.$router.push({name: "login"})
    },

  },
}
</script>
